<template>
  <div>
   <div class="dog">
     <Dog 
      :val="item.img"
      :value="item.text"
      v-for="(item, index) in date"
      :key="index"
      @loveDog = 'dogFn'
    />
   </div>
   <div class="right">
    <h4>请选择您喜欢的狗狗</h4>
    <dogListCom v-for="(item,index) in dogList" :key="index" :date='item' />
   
   </div>
  </div>
</template>

<script>
import loveDog from "./components/3喜欢的狗狗/03-选择喜欢的狗组件 copy.vue";
import dogListCom from './components/3喜欢的狗狗/03-喜欢的狗狗right.vue'
export default {
  components: {
    Dog: loveDog,
    dogListCom
  },
  data() {
    return {
      date: [
        {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "博美",
        },
         {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "泰迪",
        },
         {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "金毛",
        },
         {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "哈士奇",
        },
         {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "阿拉斯加",
        },
         {
          img: "http://destiny001.gitee.io/image/cxk.gif",
          text: "杜宾",
        },
       
      ],
      dogList:[]
    };
  },
  methods:{
    dogFn(val) {
      this.dogList.push(val)
      // console.log(this.dogList)
      // this.dogList = val
      // console.log(typeof dogList);
      console.log(this.dogList);

    }
  }
};
</script>

<style>
.dog {
  float: left;
  width: 1220px;
  height: 600px;
  /* background-color: aqua; */
}
.right {
  float: left;
}
</style>